<template>
  <div class="cont">
    <div v-for="(item,index) in msgList" :key="index" :class="item.name">
      <span>{{ item.content }}</span>
    </div>
  </div>
  <input type="text" v-model="msg" @keyup.ctrl.enter="handleSend"/>
  <select v-model="who">
    <option value="boy">小明</option>
    <option value="girl">小红</option>
  </select>
  <button @click="handleSend">发送</button>
  <select>
    <option>按下Enter发送</option>
    <option>按下Ctrl+Enter发送</option>
  </select>
</template>

<script setup>

import { ref } from 'vue';

// 定数据、用数据、改数据
const msg = ref('')
const who = ref('girl')
const msgList = ref([
  {name:'girl',content:'你好'},
  {name:'boy',content:'呵呵哒'},
])
const handleSend = ()=>{ 
  if(msg.value.trim()==''){
    alert('请输入消息后再发送')
    return
  }
  msgList.value.push({
    name:who.value,
    content:msg.value
  })
  msg.value = ''
}
</script>

<style lang="scss" scoped>
.cont {
  height: 400px;
  width: 300px;
  border: 1px solid #333;
}
span {
  padding: 10px;
  background-color: orange;
  border-radius: 10px;
  display: inline-block;
}
.boy {
  text-align: right;
}
.boy span {
  background-color: lightskyblue;
}
</style>